﻿@model IEnumerable<Guline.Web.XjsGame.Models.content>
@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_xjsLayout.cshtml";
    var appConfig = (Guline.Web.XjsGame.Models.config)ViewBag.appConfig;
    int currentPage = (int)ViewBag.newsPage;
}
<style>
          
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av
{
    background: url('@Url.Content("~/Content/jssor/b03.png")') no-repeat;
    overflow:hidden;
    cursor: pointer;
}
.jssorb03 div { background-position: -5px -4px; }
.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
.jssorb03 .av { background-position: -65px -4px; }
.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }

#tabs { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-widget-header { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid #c0c0c0; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
} 
#tabs .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-active { 
    background: transparent url(@Url.Content("~/Content/themes/base/images/uiTabsArrow.png")) no-repeat bottom center; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
    padding:0.5em 5px;
    cursor:pointer;
    font-size:11px;
} 
#tabs .ui-tabs-nav .ui-state-active a { 
    color: #4c66a4; 
    padding:0.6em 5px;
     cursor:pointer;
    font-weight:bold;
}
</style>
<script src="@Url.Content("~/Content/jssor/jssor.js")"></script>
<script src="@Url.Content("~/Content/jssor/jssor.slider.js")"></script>
<script>
    jQuery(document).ready(function ($) {

        var _SlideshowTransitions = [
        //Fade
        { $Duration: 1200, $Opacity: 2 }
        ];

        var options = {
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlayInterval: 3000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            },
            $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            }

        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        $("#tabs").tabs({
            event: "mouseover"
        });
        $(window).scroll(function () {
            if (document.documentElement.clientHeight +
                  $(document).scrollTop() >= document.body.offsetHeight) {
                // Display alert or whatever you want to do when you're 
                //   at the bottom of the page. 
                if ($("#btnreadmore").length > 0)
                {
                    $("#btnreadmore").click();
                }
            }
        });
        $("#btnreadmore").click(function () {
            var newspage = parseInt($(this).attr("data-currentpage"));
            var button = $(this);
            if (button.attr("disabled") == "disabled") {
                button.remove();
                return false;
            }
            button.find(".hook").html("<img src='@Url.Content("~/Content/images/utils/loading.gif")'/>");
            button.attr("disabled", "disabled");
            $.ajax({
                type: "get",
                url: "@Url.Action("getNewsIndexPage")/?newsPage=" + newspage,
                datatype: "json",
                success: function (data) {

                    if (data.ismax) {
                        button.attr("disabled", "disabled");
                        button.remove();
                    }
                    else {
                        var html_next_p = "";
                        $(data.list).each(function (index, news) {
                            var parsedDate = new Date(parseInt(news.date_added.substr(6)));
                            var jsDate = new Date(parsedDate); //Date object


                            if (news.image == "") {
                                html_next_p += "<div class='post'>";

                                html_next_p += "<div class='user_detail'>";
                                html_next_p += "<a class='name_user' href='@(@Request.Url.GetLeftPart(UriPartial.Authority))/goto/i" + news.id + "'>" + news.name + "</a>";

                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "</div>";
                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "<div class='time_line'>";
                                html_next_p += "<a class='time'>" + jsDate.getDate() + "-" + jsDate.getMonth() + "-" + jsDate.getFullYear() + " " + jsDate.getHours() + ":" + jsDate.getMinutes() + "</a>";
                                html_next_p += "<span class='point'>· </span>";
                                html_next_p += "<a class='earth'></a>";
                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "</div>";
                                html_next_p += "<a class='option_center'></a>";
                                html_next_p += "<div class='post_status'>";
                                html_next_p += news.detail_short;
                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "</div>";
                                html_next_p += "<div class='clr'></div>"
                                html_next_p += "</div>";
                                html_next_p += "<div class='clr'></div>"
                            }
                            else {
                                html_next_p += "<div class='commercial'>";


                                html_next_p += "<a class='title_product' href='@(@Request.Url.GetLeftPart(UriPartial.Authority))/goto/i" + news.id + "'>" + news.name + "</a>";

                                html_next_p += "<div class='clr'></div>";

                                html_next_p += " <div class='commercial_left'>";
                                html_next_p += "<a href='@(@Request.Url.GetLeftPart(UriPartial.Authority))/goto/i" + news.id + "'><img class='pic_product' src='" + news.image + "' width='106' height='95' /></a>";
                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "<div class='time_line'>";
                                html_next_p += "<a class='time'>" + jsDate.getDate() + "-" + jsDate.getMonth() + "-" + jsDate.getFullYear() + " " + jsDate.getHours() + ":" + jsDate.getMinutes() + "</a>";

                                html_next_p += " <div class='clr'></div>";
                                html_next_p += "</div>";
                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "</div>";
                                html_next_p += " <div class='commercial_right'>";
                                html_next_p += " <div class='post_status'>";
                                html_next_p += news.detail_short;
                                html_next_p += "<div class='clr'></div>";
                                html_next_p += "</div>";
                                html_next_p += "</div>";
                                html_next_p += " <a class='option_center'></a>";
                                html_next_p += " <div class='clr'></div>";
                                html_next_p += "<div class='clr'></div>"
                                html_next_p += "</div>";
                                html_next_p += "<div class='clr'></div>"
                            }
                        });

                        button.removeAttr("disabled");
                        $("#newsZone").append(html_next_p);
                        if (history && history.pushState) {
                            history.pushState(null, null, '/trang-chu/page-' + newspage);
                        }
                        button.attr("data-currentpage", newspage + 1);

                    }
                    button.find(".hook").html('');
                   
                }

            });
            return false;
        });
    });
</script>
<div class="body_center">
    <!--  -->
    <div id="newsZone">
        @foreach (var m in Model)
        {
            if (m.image != "")
            {
              
            <div class="commercial">
                <a href="@Url.Action("Detail", "Content", new { ID = m.id,Title=Guline.Web.XjsGame.Infrastructure.Utils.UrlRewriteString(m.name) })" class="title_product">@m.name</a>
                <div class="clr"></div>
                <div class="commercial_left">
                    <a href="@Url.Action("Detail", "Content", new { ID = m.id,Title=Guline.Web.XjsGame.Infrastructure.Utils.UrlRewriteString(m.name) })"><img class="pic_product" src="@Url.Content(m.image)" width="106" height="95" /></a>
                    <div class="clr"></div>
                    <div class="time_line">
                        <a class="time">@m.date_added.ToString("dd/M/yyyy hh:mm")</a>

                        <div class="clr"></div>
                    </div>
                    <div class="clr"></div>
                </div>
                <div class="commercial_right">
                    <div class="post_status">
                        @Html.Raw(m.detail_short)
                        <div class="clr"></div>
                    </div>
                </div>
                <a class="option_center"></a>
                <div class="clr"></div>
            </div>
            <div class="clr"></div>
            }
            else
            {
            <div class="post">

                <div class="user_detail">
                    <a class="name_user" href="@Url.Action("Detail", "Content", new { ID = m.id,Title=Guline.Web.XjsGame.Infrastructure.Utils.UrlRewriteString(m.name)  })">@m.name</a>

                    <div class="clr"></div>
                </div>
                <div class="clr"></div>
                <div class="time_line">
                    <a class="time">@m.date_added.ToString("dd/M/yyyy hh:mm")</a>
                    <span class="point">· </span>
                    <a class="earth"></a>
                    <div class="clr"></div>
                </div>
                <a class="option_center"></a>
                <div class="post_status">
                    @Html.Raw(m.detail_short)
                    <div class="clr"></div>
                </div>
                <div class="clr"></div>
            </div> 
            <div class="clr"></div>
            }
        }
    </div>
    <!--  -->
    <a href="#" id="btnreadmore" data-currentpage="@currentPage" style="padding: 5px 10px; text-align: center; background: #fff;color:#4c66a4; border: 1px solid #dfe0e4; display: block"><span class="hook"></span>Xem thêm &raquo;</a>
    <div class="clr"></div>
</div>
<div class="body_right">
    <div class="status_box">
        <div id="slider1_container" style="position: relative; width: 275px; height: 400px;">
            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 275px; height: 400px; overflow: hidden;">
                <div>
                    <img u=image src="@Url.Content("~/Content/images/slider/01.jpg")" />
                </div>
                <div>
                    <img u=image src="@Url.Content("~/Content/images/slider/02.jpg")" />
                </div>
                <div>
                    <img u=image src="@Url.Content("~/Content/images/slider/03.jpg")" />
                </div>
                <div>
                    <img u=image src="@Url.Content("~/Content/images/slider/04.jpg")" />
                </div>
            </div>

            <!-- bullet navigator container -->
            <div u="navigator" class="jssorb03" style="position: absolute; bottom: 4px; left: 6px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align: center; line-height: 21px; color: white; font-size: 12px;">
                    <numbertemplate></numbertemplate>
                </div>
            </div>
        </div>
    </div>
    <div class="partners" style="background: #000; ">
        <!---->
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Linh Hầu</a></li>
                <li><a href="#tabs-2">Cửu Vĩ</a></li>
                <li><a href="#tabs-3">Ngưu Ma</a></li>
                <li><a href="#tabs-4">Thiết phiến</a></li>
            </ul>
            <div id="tabs-1" style="text-align: center">
                <img src="@Url.Content("~/Content/images/class/hauvuong.gif")" />
            </div>
            <div id="tabs-2" style="text-align: center">
                <img src="@Url.Content("~/Content/images/class/cuuvi.gif")" />
            </div>
            <div id="tabs-3" style="text-align: center">
                <img src="@Url.Content("~/Content/images/class/nguuma.gif")" />
            </div>
            <div id="tabs-4" style="text-align: center">
                <img src="@Url.Content("~/Content/images/class/thietphien.gif")" />
            </div>
        </div>
       
           
        <!---->
        <div class="clr"></div>
    </div>
      <div class="clr"></div>
        <div class="lisences">
            <span class="ilisences">Bản quyền & sản xuất</span> <img src="@Url.Content("~/Content/images/lisences/mokylin.png")" />
             <div class="clr"></div>
        </div>
    <div class="copy">
        <span class="copy_right">&copy; @DateTime.Now.Year - @appConfig.tenweb</span>
    </div>
</div>
